<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
</head>
<script src="../js/vue.js"></script>
<body>
    <h4>父子组件的通信</h4>
    <h4>通过props向子组件发送数据</h4>
    <h4>通过事件向父组件发送数据</h4>
    <h3>父传子</h3>
    <div id="app">   
       <cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
    </div>
    <template id="cpn">
        <div>
            <p>{{cmovies}}</p>
            <p>{{cmessage}}</p>
        </div>
      </template>
    <script>
        const cpn = {
            template: '#cpn',
            // props: ['cmovies','cmessage'],
            props: {
                //  1.类型限制
                // cmovies: Array,
                // cmessage: String,

                // 2.提供一些默认值
                cmessage: {
                    type: String,
                    default: 'aaaaaa',  // 默认值
                    required: true  // 意思是该数据是必传的
                },
                cmovies: {
                    type: Array,
                    default() {
                        return []
                    }  // Object/数组类型定义默认值必须是这样
                }

                // 3. 也可以是自定义类型

                // 4. 注意：如果用cMessage,上面要绑定 :c-message="cmessage"
                // 即驼峰标识

            },
            data () {
                return {
                    
                }
            }
        }
        const app = new Vue({
            el: '#app',    
            data: {    
                message: '你好，vue',
                movies: ['海王','海贼王','海尔兄弟'] 
            },
            methods: {
                
            },
            components: {
                cpn
            }
        })
        


    </script>

    <img src="../img/props.png" alt="">
</body>
</html>